<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="${path}/js/jquery.min.js"></script>
<link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css" media="all">
<link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
<script src="${path}/layui/layui.js"></script>
<body>
<%--增加套餐类型--%>
<br>
<h1 style="text-align: center">套餐管理</h1>
<hr>
<div id="leixings" style="display:none;">
    <form class="layui-form" id="leixing" lay-filter="leixing" name="leixing">
        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-inline">
                <label class="layui-form-label">套餐类型：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name"  autocomplete="off" id="packagename" value="" class="layui-input" >
                </div>
            </div>
        </div>
    </form>
</div>
<%--增加套餐--%>
<div id="xainshi" style="display: none;">
    <form class="layui-form" id="caotan" lay-filter="caotan" name="caotan">
        <input type="hidden" name="id" id="idss">
        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-inline">
                <label class="layui-form-label">套餐名称：</label>
                <div class="layui-input-inline" style="width: 190px;">
                    <select name="packageTypeId" id="taocanid">
                        <option value="-1">全部</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm" type="button" onclick="add()"><i class="layui-icon layui-icon-add-circle"></i> 添加类型</button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">会员类型：</label>
                <div class="layui-input-inline" style="width: 190px;">
                    <select name="viptypeid" id="cardid">
                        <option value="-1">全部</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">套餐时长：</label>
                <div class="layui-input-inline">
                    <input type="text" name="time"  id="shichang" autocomplete="off"  value="" class="layui-input" >
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品类型：</label>
                <div class="layui-input-inline" style="width: 190px;">
                    <select  id="shangpinleixingid" lay-filter="myselect2">
                        <option value="-1">全部</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">附赠商品：</label>
                <div class="layui-input-inline" style="width: 190px;">
                    <select name="shopping" id="shoppingid">
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>

<div style="margin-top: 20px;">
    <form class="layui-form" id="addform" lay-filter="addform" name="addform">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">套餐类型</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <select name="packageTypeId" id="rolesss" >
                        <option value="-1">全部</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 100px;">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="SearchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
                </div>
            </div>

        </div>

    </form>
</div>
<table class="layui-table" lay-data="{id:'vipTable',url:'${path}/Taocan/list', page:true,toolbar:'#toolbarDemo',defaultToolbar: ['filter', 'print', 'exports'],even: true}"
       lay-filter="vipTable">
    <thead>
    <tr>
        <th lay-data="{templet:'#name'}">套餐名称</th>
        <th lay-data="{field:'time'}">套餐时长</th>
        <th lay-data="{templet:'#shangpin'}">附赠商品</th>
        <th lay-data="{toolbar:'#barDemo'}">操作</th>
    </tr>
    </thead>
</table>
<script>
    $.get("/Taocan/cardid",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#cardid");
            opt.text(this.name).val(this.id);
        })
    })
    <%--二级联动--%>
    layui.use(['form'],function () {
        layui.form.render();
        table = layui.table;
        var layer = layui.layer
            ,form = layui.form;
        form.on('select(myselect2)', function(data){
            $("#shoppingid").empty();
            $.post("${path}/Taocan/shoppingid",{id:data.value},function (str) {
                $.each(str.data, function(idx,obj) {
                    var option1 = $("<option>").val(obj.id).text(obj.name);
                    $("#shoppingid").append(option1);
                    form.render('select');
                });
                $("#shoppingid").get(0).selectedIndex=0;

            })
        });
    })
    function add() {
        layer.open({
            type: 1,
            title: "增加套餐",
            skin: "layui-layer-molv",
            anim: 0,
            offset:"180px",
            area: "500px",
            content: $("#leixings"),
            btn: ['确定','返回'],
            success: function () {
                $("#packagename").val('');
            },
            yes:function (index) {
                var packagename=$("#packagename").val();
                $.post("/viptype/packagename",{"name":packagename},function (data) {
                    if(data.name!=null){
                        layer.msg("该套餐类型已存在");
                    }else{
                        var leixing=$("#leixing").serialize();
                        $.post("/Taocan/addtaocan",leixing,function () {
                            layer.msg("增加成功");
                            layer.close(index);
                            $("#taocanid").empty();
                            layui.form.render();
                            //重置下拉框1
                            $.get("/Taocan/caotanall",function (data) {
                                $.each(data,function () {
                                    var opt=$("<option></option>").appendTo("#taocanid");
                                    opt.text(this.name).val(this.id);
                                })
                                layui.form.render();
                            })
                            $("#rolesss").empty();
                            layui.form.render();
                            //重置下拉框2
                            $.get("/Taocan/caotanall",function (data) {
                                $.each(data,function () {
                                    var opt=$("<option></option>").appendTo("#rolesss");
                                    opt.text(this.name).val(this.id);
                                })
                                layui.form.render();
                            })
                        })
                    }
                })
            }
        });
    }
    function SearchData() {
        layui.table.reload("vipTable",{
            page:{
                curr:1
            },
            where:{
                "packageTypeId":$("#rolesss").val()
            }
        })
    }
    $.get("/Taocan/caotanall",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#rolesss");
            opt.text(this.name).val(this.id);
        })
    })
    $.get("/Taocan/caotanall",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#taocanid");
            opt.text(this.name).val(this.id);
        })
    })
    //商品类型
    $.get("/Taocan/shoppingtype",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#shangpinleixingid");
            opt.text(this.type).val(this.id);
        })
    })

    layui.config({
        base: '${path}/layui/lay/modules/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(["table","form","formSelects"],function() {
        var table = layui.table;
        table.on('toolbar(vipTable)',function (obj) {
            switch (obj.event) {
                case "addct":
                    layer.open({
                        type: 1,
                        title: "增加套餐",
                        skin: "layui-layer-molv",
                        anim: 0,
                        offset:"120px",
                        area: "500px",
                        content: $("#xainshi"),
                        btn: ['确定','返回'],
                        success: function () {
                            fomrReset();
                        },
                        yes:function (index) {
                            var taocanid=$("#taocanid").val();
                            var shangpinleixingid=$("#shangpinleixingid").val();
                            var shichang=$("#shichang").val();
                            if(taocanid==-1 || shangpinleixingid==-1){
                                layer.msg("请仔细填写...",function () {})
                                return false;
                            }
                            if(shichang==null || shichang==""){
                                layer.msg("请仔细填写...",function () {})
                                return false;
                            }
                            //判断是否存在套餐
                            //获取套餐编号
                            var id = $("#taocanid").val();
                            $.post("/Taocan/getPackage",{"id":id},function (data) {
                                if(data.id != null){
                                    layer.msg("该套餐已存在...",function () {})
                                }else{
                                    var caotan=$("#caotan").serialize();
                                    $.post("/Taocan/taocanadd",caotan,function () {
                                        layer.close(index);
                                        table.reload('vipTable');
                                    })
                                }
                            })

                        }
                    });
                    break;
            }
        })
        table.on('tool(vipTable)',function (obj) {
            var data=obj.data;
            var e=obj.event;
            switch (e) {
                case "update":
                    layer.open({
                        type: 1,
                        title: "修改套餐",
                        skin: "layui-layer-molv",
                        anim: 0,
                        offset:"120px",
                        area: "500px",
                        content: $("#xainshi"),
                        btn: ['确定','返回'],
                        success: function () {
                            fomrReset();
                            console.log(data)
                            $("#taocanid").val(data.packageType.id);
                            $("#cardid").val(data.viptypeid);
                            $("#shoppingid").val('');
                            $("#idss").val(data.id)
                            layui.form.render("select");
                            $("#shichang").val(data.time);

                        },
                        yes:function (index) {
                            var shoppingid=$("#shoppingid").val();
                            if(shoppingid==null || shoppingid==""){
                                layer.msg("请选择商品类型...",function () {})
                                return false;
                            }
                            var caotan=$("#caotan").serialize();
                            console.log(caotan)
                            $.post("/Taocan/updatetaocan",caotan,function () {
                                layer.msg('修改成功');
                                layer.close(index);
                                table.reload('vipTable');
                            })
                        }
                    });
                    break;
                case "del":
                    layer.open({
                        time:0,
                        title:'儿童乐园友情提示！',
                        content:"确定要删除该行数据吗？",
                        shade: [0.3, '#000'],
                        btn:['确定','取消'],
                        yes : function () {
                            $.post("${path}/Taocan/deltaocan",{"id":data.id},function () {
                                layer.msg('删除成功');
                                table.reload('vipTable');
                            });
                        }
                    })
                    break;
            }
        })
    })
</script>
<script type="text/html" id="shangpin">
    {{d.shoppings.name}}
</script>
<script type="text/html" id="name">
    {{d.packageType.name}}
</script>
<%--导航按钮--%>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="addct"><i class="layui-icon layui-icon-add-circle"></i> 增加套餐</button>
</script>
<%--操作按钮--%>
<script type="text/html" id="barDemo">
    <a href="javascript:void (0)" lay-event="update" title="修改"><span class="layui-icon layui-icon-edit"></span></a>&ensp;
    <a href="javascript:void (0)" lay-event="del" title="删除"><span class="layui-icon layui-icon-delete"></span></a>&ensp;
</script>
<script>
    function fomrReset(){
        document.getElementById("caotan").reset();
    }
</script>
</body>
</html>
